import { Card, Table, Input, Select, DatePicker, Space } from 'antd';
import { useState, useEffect } from 'react';

const { RangePicker } = DatePicker;

export const Logs = () => {
  const [logs, setLogs] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    loadLogs();
  }, []);

  const loadLogs = async () => {
    setLoading(true);
    try {
      // TODO: Load from API
      const mockLogs = [
        {
          id: 1,
          timestamp: new Date().toISOString(),
          level: 'INFO',
          user: 'user1',
          action: 'Connected',
          ip: '192.168.1.100',
        },
        {
          id: 2,
          timestamp: new Date().toISOString(),
          level: 'INFO',
          user: 'user2',
          action: 'Disconnected',
          ip: '192.168.1.101',
        },
      ];
      setLogs(mockLogs);
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    { title: 'Time', dataIndex: 'timestamp', key: 'timestamp', render: (val: string) => new Date(val).toLocaleString() },
    { title: 'Level', dataIndex: 'level', key: 'level' },
    { title: 'User', dataIndex: 'user', key: 'user' },
    { title: 'Action', dataIndex: 'action', key: 'action' },
    { title: 'IP Address', dataIndex: 'ip', key: 'ip' },
  ];

  return (
    <div style={{ padding: '24px' }}>
      <h1 style={{ fontSize: '24px', marginBottom: '24px' }}>Logs</h1>

      <Card style={{ marginBottom: '16px' }}>
        <Space>
          <Input.Search placeholder="Search logs..." style={{ width: 200 }} />
          <Select placeholder="Level" style={{ width: 120 }}>
            <Select.Option value="all">All</Select.Option>
            <Select.Option value="info">INFO</Select.Option>
            <Select.Option value="warn">WARN</Select.Option>
            <Select.Option value="error">ERROR</Select.Option>
          </Select>
          <RangePicker />
        </Space>
      </Card>

      <Card>
        <Table dataSource={logs} columns={columns} loading={loading} rowKey="id" />
      </Card>
    </div>
  );
};
